<lib-utask-error-message [data]="errors.tasks" *ngIf="errors.tasks"></lib-utask-error-message>

<div class="send-request" *ngIf="!!bulkActions && !options?.disableBulk">
    <button type="button" nz-button nz-dropdown [nzDropdownMenu]="menuBulk" [nzPlacement]="'bottomLeft'"
        nzType="primary" [nzTrigger]="'click'">Bulk
        actions</button>
    <nz-dropdown-menu #menuBulk="nzDropdownMenu">
        <ul nz-menu>
            <li nz-menu-item (click)="runAll()" [nzDisabled]="!bulkActions.run">
                Run
            </li>
            <li nz-menu-item (click)="cancelAll()" [nzDisabled]="!bulkActions.cancel">
                Cancel</li>
            <li nz-menu-item (click)="pauseAll()" [nzDisabled]="!bulkActions.pause">Pause</li>
            <li nz-menu-item (click)="extendAll()" [nzDisabled]="!bulkActions.extend">Extend</li>
            <li nz-menu-item (click)="deleteAll()" [nzDisabled]="!bulkActions.delete">Delete</li>
        </ul>
    </nz-dropdown-menu>
</div>

<nz-table #virtualTable [nsAutoHeightTable]="39" [nzData]="tasks" [nzFrontPagination]="false" [nzShowPagination]="false"
    nzSize="small" [nzLoading]="loadingTasks && tasks.length === 0">
    <thead>
        <tr>
            <th *ngIf="!options?.disableBulk" nzLeft nzWidth="50px" [nzChecked]="!!bulkAllSelected"
                (nzCheckedChange)="clickCheckAll($event)">
            </th>
            <th [nzWidth]="titleWidth">Title</th>
            <th nzWidth="150px">Status</th>
            <th nzWidth="150px">Requester</th>
            <th nzWidth="150px">Resolver</th>
            <th nzWidth="150px">Last activity</th>
            <th nzRight nzWidth="150px">Actions</th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let item of virtualTable.data; let index = index; trackBy: trackInput">
            <tr *ngIf="index === 0 && newTasks.length > 0">
                <td [nzAlign]="'center'" [attr.colspan]="options?.disableBulk ? 6 : 7">
                    <button type="button" nz-button nzType="default" (click)="clickShowNewTasks()">Show
                        {{newTasks.length}}
                        new task{{newTasks.length > 1 ? 's': ''}}</button>
                </td>
            </tr>
            <tr>
                <td *ngIf="!options?.disableBulk" nzLeft [nzChecked]="!!bulkSelection[item.id]"
                    (nzCheckedChange)="clickCheckTask(item.id, $event)">
                </td>
                <td>
                    <a [routerLink]="options.routingTaskPath+item.id" [title]="item.title">{{item.title}}</a>
                    <br />
                    <small>{{item.id}}</small>
                    <i class="tags" nz-icon nzType="tags" nzTheme="outline" [nzTooltipTitle]="tooltip" nz-tooltip
                        *ngIf="item.tags"></i>
                </td>
                <td>
                    <lib-utask-task-status [task]="item"></lib-utask-task-status>
                </td>
                <td>
                    {{item.requester_username}}
                    <br />
                    <small class="subtext">{{item.created | utaskFromNow}}</small>
                </td>
                <td>
                    {{item.resolver_username}}
                </td>
                <td>
                    {{item.last_activity | utaskFromNow}}
                </td>
                <td nzRight>
                    <nz-button-group>
                        <button type="button" nz-button nzType="primary" title="Run"
                            (click)="runResolution(item.resolution, item.id)" [disabled]="!tasksActions[index].run"><i
                                nz-icon nzType="caret-right"></i></button>
                        <button type="button" nz-button nzType="primary" title="Cancel"
                            (click)="cancelResolution(item.resolution, item.id)"
                            [disabled]="!tasksActions[index].cancel"><i nz-icon nzType="stop"></i></button>
                        <button type="button" nz-button nz-dropdown [nzDropdownMenu]="menu"
                            [nzPlacement]="'bottomRight'" nzType="primary"
                            [disabled]="!tasksActions[index].more">More</button>
                    </nz-button-group>
                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu>
                            <li nz-menu-item (click)="pauseResolution(item.resolution, item.id)"
                                [nzDisabled]="!tasksActions[index].pause">
                                Pause
                            </li>
                            <li nz-menu-item (click)="extendResolution(item.resolution, item.id)"
                                [nzDisabled]="!tasksActions[index].extend">
                                Extend</li>
                            <li nz-menu-item (click)="deleteTask(item.id)" [nzDisabled]="!tasksActions[index].delete">
                                Delete</li>
                        </ul>
                    </nz-dropdown-menu>
                </td>
                <ng-template #tooltip>
                    <ng-container *ngIf="item.tags">
                        Tags
                        <ul>
                            <ng-container *ngFor="let key of objectKeys(item.tags)">
                                <li>{{key}}:{{item.tags[key]}}</li>
                            </ng-container>
                        </ul>
                    </ng-container>
                </ng-template>
            </tr>
            <tr *ngIf="index === tasks.length-1 && hasMore">
                <td [nzAlign]="'center'" [attr.colspan]="options?.disableBulk ? 6 : 7">
                    <button type="button" nz-button nzType="default" (click)="clickShowMore()">Show more</button>
                </td>
            </tr>
        </ng-container>
    </tbody>
</nz-table>